@charset "utf-8";
@import "common";
.point,.case,.case-con,.sale,.floor,.mom-con,.img-con,.bottom-con,.bottom-nav{
    width: 1200px;
    margin: 0 auto;
}
//banner
#banner{
    height: 447px;
    background: url(../images/img145.jpg) no-repeat center;
    margin: 0 auto 20px;
    .banner{
        height: 447px;
//      background: yellow;
        position: relative;
        .banner-con{
            width: 191px;
            height: 447px;
            position: absolute;
            right: 0;
        }
        .btnL{
            width: 40px;
            height: 60px;
            background: #000 url(../images/img176.png) no-repeat -126px -137px;
            position: absolute;
            top: 193px;
            left: 216px;
            z-index: 1;
            border-radius: 5px;
            opacity: 0;
        }
        .btnR{
            width: 40px;
            height: 60px;
            background: #000 url(../images/img176.png) no-repeat -6px -137px;
            z-index: 1;
            position: absolute;
            top: 193px;
            right: 197px;
            z-index: 1;
            border-radius: 5px;
            opacity: 0;
        }
    }
}
//main
#main{
    //point
    .point{
        width: 1170px;
        padding: 10px 15px;
        height: 32px;
        margin-top: 30px;
        .point-con{
            width: 270px;
            height: 32px;
            background: url(../images/img165.png) no-repeat -100px 5px;
            padding-left: 39px;
            float: left;
            span:nth-of-type(1){
                width: 96px;
                height: 32px;
                font-size: 24px;
                line-height: 32px;
                color: black;
            }
            span:nth-of-type(2){
                width: 154px;
                height: 32px;
                font-size: 14px;
                color: #999;
                margin-left: 15px;
            }
        }
        a{
            float: right;
            width: 75px;
            height: 32px;
            font-size: 14px;
            line-height: 32px;
            color: #d41d55;
        }
    }
    //case
    .case{
        height: 448px;
        padding: 10px 0;
        .clock{
            position: relative;
            width: 1200px;
            height: 80px;
            background: url(../images/img158.png) no-repeat left 0px;
            .clock-con{
                width: 285px;
                height: 32px;
                position: absolute;
                top: 16px;
                left: 30px;
                font-size: 16px;
                color: white;
                line-height: 32px;
                span{
                    display: inline-block;
                    width: 46px;
                    height: 32px;
                    font-size: 26px;
                    text-align: center;
                }
            }
            .clock_con{
                width: 600px;
                height: 53px;
                float: right;
                div{
                    width: 90px;
                    height: 53px;
                    float: left;
                    text-align: center;
                    img{
                        display: inline-block;
                        opacity: 0;
                    }
                    
                    div{
                       height: 26px;
                       line-height: 28px;
                       text-align: center;
                       color: white;
                       background: #ccc;
                       border-radius: 14px; 
                    }
                }
                .time2{
                    margin: 0 120px;
                }
                .time3{
                    img{
                        opacity: 1;
                    }
                    .t3{
                        background: #E5004A;
                    }
                }
            }
        }
        .case-con{
            height: 330px;
            padding: 28px 0 10px 0;
            position: relative;
            .btnL{
                position: absolute;
                top: 36%;
                left: 0;
                width: 18px;
                height: 36px;
                background: url(../images/img165.png) no-repeat -100px -195px;  
            }
            .btnR{
                position: absolute;
                right: 0;
                top: 36%;
                width: 18px;
                height: 36px;
                background: url(../images/img165.png) no-repeat -100px -158px;  
            }
            .case-ul{
                width: 1150px;
                height: 330px;
                margin: 0 auto;
                li{
                    float: left;
                    width: 230px;
                    position: relative;
                    img{
                        width: 219px;
                        height: 219px;
                    }
                    .mark{
                        width: 94px;
                        height: 82px;
                        position: absolute;
                        top: 45px;
                        left: 40px;
                        z-index: 100;
                        background: red;
                        padding: 30px 24px;
                        background: url(../images/img165.png) no-repeat 0 -1008px;
                        overflow: hidden;
                        opacity: 0;
                        a{
                            padding: 4px 10px;
                            text-align: center;
                            font-size: 14px;
                            color: white;
                            background: #E5004A;
                            position: absolute;
                            top: 60px;
                            left: -84px;
                            display: none;
                        }
                    }
                    .news{
                        width: 100%;
                        max-height: 24px;
                        overflow: hidden;
                        padding-bottom: 5px;
                        font-size: 12px;
                        line-height: 24px;
                        color: #666;
                    }
                    .news:hover{
                        color: #E5004A;
                    }
                    .price{
                        display: block;
                        width: 57px;
                        height: 52px;
                        float: left;
                        color: #E5004A;
                        font-size: 18px;
                        font-weight: 600;
                        padding-bottom: 10px;
                        line-height: 24px;
                        span:nth-of-type(1){
                            color: #E5004A;
                        }
                        span:nth-of-type(2){
                            font-size: 12px;
                            color: #a2a2a2;
                            margin: -6px 0 0 3px;
                            text-decoration: line-through; 
                        }
                    }
                }
            }
        }
    }
    //sale
    .sale{
        _heihgt: 1168px;
        min-height: 1168px;
        .sale-title{
            width: 1170px;
            padding: 10px 15px;
            height: 32px;
            .point-con{
                width: 270px;
                height: 32px;
                background: url(../images/img165.png) no-repeat -100px -24px;
                padding-left: 39px;
                float: left;
                span:nth-of-type(1){
                    width: 96px;
                    height: 32px;
                    font-size: 24px;
                    line-height: 32px;
                    color: black;
                }
                span:nth-of-type(2){
                    width: 154px;
                    height: 32px;
                    font-size: 14px;
                    color: #999;
                    margin-left: 15px;
                }
            }
            a{
                float: right;
                width: 75px;
                height: 32px;
                font-size: 14px;
                line-height: 32px;
                color: #d41d55;
            }
        }
        .sale-ul{
            li{
                width: 588px;
                float: left;
                margin: 0 0.5% 20px 0.5%;
                .trad{
                    width: 100%;
                    position: relative;
                    float: left;
                    text-align: center;
                    .trad-case{
                        width: 588px;
                        height: 234px;
                        overflow: hidden;
                        box-shadow: 0 0 6px #e8e7db;
                        margin: 10px 0;
                        position: relative;
                        figcaption{
                            width: 588px;
                            height: 56px;
                            background: white;
                            position: absolute;
                            bottom: -56px;
                            left: 0;
                            z-index: 1000;
                            text-align: center;
                            img{
                               height: 52px;
                               margin-top: 2px;
                               float: left;
                            }
                            .f1{
                                position: absolute;
                                bottom: -56px;
                                left: 120px;
                                width: 150px;
                                height: 56px;
                                font-size: 16px;
                                line-height: 58px;
                                color: #3c4a50;
                                text-align: left;
                            }
                            .f2{
                                position: absolute;
                                bottom: -56px;
                                right: 0;
                                width: auto;
                                height: 56px;
                                font-size: 18px;
                                line-height: 56px;
                                text-align: center;
                                color: #E5004A;
                            }
                        }
                    }
                    .sale-clock{
                        width: 100%;
                        height: 24px;
                        text-align: right;
                        color: #000000;
                        display: block;
                        float: right;
                        position: absolute;
                        bottom: -20px;
                        right: 5px;
                        font-size: 12px;
                    }
                }
            }
        }
    }
    //floor
    .floor{
        _height: 2380px;
        padding: 10px 0;
        min-height: 2380px;
        .floor1{
            width: 100%;
            height: 446px;
            border-top: 4px solid #c388b3;
            box-shadow: 0 0 6px #E8E7DB;
            margin-bottom: 30px;
            .floor-nav{
                width: 197px;
                height: 446px;
                border-left: 1px solid #e8e8e8;
                border-bottom: 1px solid #e8e8e8;
                float: left;
                .nav-img{
                    position: relative;
                    .nav-til{
                        position: absolute;
                        font-size: 26px;
                        color: #ffffff;
                        top: 14px;
                        left: 50px;
                    }
                }
                .nav-ul{
                    width: 197px;
                    height: 190px;
                    li{
                        float: left;
                        width: 49%;
                        padding: 7px 0;
                        text-align: center;
                        a{
                            font-size: 12px;
                            color: #666;
                        } 
                    }
                }
                .nav-slide-con{
                    width: 195px;
                    height: 193px;
                    position: relative;
                    overflow: hidden;
                    .nav-slide1{
                        width: 975px;
                        position: absolute;
                        bottom: 16px;
                        left: 0;
                        li{
                            width: 195px;
                            float: left;
                            display: block;
                            overflow: hidden;
                            img{
                                width: 43.1%;
                                margin: 0 auto;
                                margin-top: 10px;
                            }
                        }
                    }
                    .fl{
                        position: absolute;
                        top: 40%;
                        left: 10px;
                        width: 30px;
                        height: 31px;
                        z-index: 100;
                        opacity: 0.7;
                        background: url(../images/img152.png) no-repeat;
                    }
                    .fr{
                        position: absolute;
                        top: 40%;
                        right: 10px;
                        width: 30px;
                        height: 31px;
                        z-index: 100;
                        opacity: 0.7;
                        background: url(../images/img153.png) no-repeat 18px;
                    }
                }  
            }
            .floor-l{
                float: left;
                width: 400px;
                height: 441px;
                overflow: hidden;
                border-right: 1px solid #e8e8e8;
                border-bottom: 1px solid #e8e8e8;
                border-left: 1px solid #e8e8e8;
                img{
                    width: 400px;
                    height: 441px;
                }
            }
            .floor-r{
                width: 597px;
                height: 442px;
                float: left;
                a{
                    width: 198px;
                    height: 251px;
                    float: left;
                    border-right: 1px solid #e8e8e8;
                    border-bottom: 1px solid #e8e8e8;
                    position: relative;
                    h2{
                      width: 100%;
                      height: 30px;
                      line-height: 30px;
                      font-size: 16px;
                      color: #333;
                      text-align: center; 
                      margin-top: 8px; 
                    }
                    h3{
                      width: 100%;
                      height: 22px;
                      line-height: 22px;
                      font-size: 14px;
                      color: #E5004A;
                      text-align: center;
                      margin-bottom: 10px;  
                    }
                    img{
                        width: 165px;
                        height: 165px;
                        position: absolute;
                        top: 70px;
                        left: 17px;
                    }
                }
                a:nth-of-type(4){
                    height: 187px;
                    img{
                       width: 102px;
                       height: 102px;
                       position: absolute;
                       left: 48px;
                    }
                }
                a:nth-of-type(5){
                    height: 187px;
                    img{
                       width: 102px;
                       height: 102px;
                       position: absolute;
                       left: 48px;
                    }
                }
                a:nth-of-type(6){
                    height: 187px;
                    img{
                       width: 102px;
                       height: 102px;
                       position: absolute;
                       left: 48px;
                    }
                }
            }
        }
        .floor2{
            @extend.floor1;
            .nav-slide2{
                width: 975px;
                position: absolute;
                bottom: 16px;
                left: 0;
                li{
                    width: 195px;
                    float: left;
                    display: block;
                    overflow: hidden;
                    img{
                        width: 43.1%;
                        margin: 0 auto;
                        margin-top: 10px;
                    }
                }
            }
        }
        .floor3{
            @extend.floor1;
            .nav-slide3{
                width: 975px;
                position: absolute;
                bottom: 16px;
                left: 0;
                li{
                    width: 195px;
                    float: left;
                    display: block;
                    overflow: hidden;
                    img{
                        width: 43.1%;
                        margin: 0 auto;
                        margin-top: 10px;
                    }
                }
            }
        }
        .floor4{
            @extend.floor1;
            .nav-slide4{
                width: 975px;
                position: absolute;
                bottom: 16px;
                left: 0;
                li{
                    width: 195px;
                    float: left;
                    display: block;
                    overflow: hidden;
                    img{
                        width: 43.1%;
                        margin: 0 auto;
                        margin-top: 10px;
                    }
                }
            }
        }
        .floor5{
            @extend.floor1;
            .nav-slide5{
                width: 975px;
                position: absolute;
                bottom: 16px;
                left: 0;
                li{
                    width: 195px;
                    float: left;
                    display: block;
                    overflow: hidden;
                    img{
                        width: 43.1%;
                        margin: 0 auto;
                        margin-top: 10px;
                    }
                }
            }
        }
    }
    //mom
    .mom-con{
        _heihgt: 242px;
        min-height: 242px;
        .mom-title{
            width: 1170px;
            padding: 10px 15px;
            height: 32px;
            .point-con{
                width: 270px;
                height: 32px;
                background: url(../images/img165.png) no-repeat -100px -24px;
                padding-left: 39px;
                float: left;
                span:nth-of-type(1){
                    width: 96px;
                    height: 32px;
                    font-size: 24px;
                    line-height: 32px;
                    color: black;
                }
                span:nth-of-type(2){
                    width: 154px;
                    height: 32px;
                    font-size: 14px;
                    color: #999;
                    margin-left: 15px;
                }
            }
        }
        .mom-img{
            width: 100%;
            height: 160px;
            a{
                float: left;
                width: 390px;
                height: 160px;
                margin-right: 15px;
            }
            a:nth-of-type(3){
                margin-right: 0;
            }
        }
    }    
}
//img
#img{
    background: #e5004b;
    padding: 20px 0;
    height: 58px;
    border-top: 10px solid #e5004b;
    .img-con{
        height: 58px;
        img{
            float: left;
            margin-right: 60px;
            margin-left: 70px;
        }
    }
}
//bottom
#bottom{
    background: #333;
    .bottom-con{
        height: 319px;
        .bottom-nav{
            height: 161px;
            border-bottom: 1px solid #444;
            ul{
                border-right: 1px solid #444;
                width: 170px;
                text-align: center;
                margin-top: 30px;
                margin-bottom: 15px;
                float: left;
                li{
                    width: 170px;
                    height: 24px;
                    font-size: 12px;
                    line-height: 24px;
                    text-align: center;
                    margin: 5px 0;
                    a{
                        color: #666;
                    }
                    a:hover{
                        color: #E5004A;
                    }
                }
            }
            ul:nth-of-type(7){
                border: 0;
                img{
                    margin-left: 26px;
                }
            }
        }
        .yq{
            width: 100%;
            height: 28px;
            padding: 20px 0;
            .yq-con{
                width: 350px;
                height: 24px;
                margin: 0 auto;
                a{
                    float: left;
                    height: 24px;
                    border-right: 1px solid #444;
                    padding: 0px 10px;
                    font-size: 12px;
                    line-height: 24px;
                    color: #666;
                }
                a:hover{
                    color: #E5004A;
                }
            }
        }
        p{
            width: 100%;
            font-size: 12px;
            color: #666;
            text-align: center;
        }
        .yq-img{
            width: 100%;
            text-align: center;
            margin-top: 10px;
            img{
                float: left;
                width: 137px;
                height: 47px;
                margin-left: 5px;
            }
            img:nth-of-type(1){
                margin-left: 460px;
            }
        }
    }
    
}  
